<template>
  <div>
    <el-form :model="params">
      <el-select v-model="params.siteId" placeholder="请选择站点">
        <el-option
          v-for="item in siteList"
          :key="item.siteId"
          :label="item.siteName"
          :value="item.siteId"
        ></el-option>
      </el-select>
      页面别名:<el-input v-model="params.pageAliase" style="width: 100px"></el-input>
      <el-button type="primary" size="small" v-on:click="query">查询</el-button>
      <router-link :to="{path:'/cms/page/add',query:{
        page:this.params.page,
        siteId:this.params.siteId
      }}">
        <el-button type="primary" size="small">新增页面</el-button>
      </router-link>

    </el-form>

    <el-table
      :data="list"
      stripe
      style="width: 100%">
      <el-table-column
        type="index"
        width="60">

      </el-table-column>
      <el-table-column
        prop="pageName"
        label="页面名称"
        width="120">

      </el-table-column>

      <el-table-column
        prop="pageAliase"
        label="别名"
        width="120">


      </el-table-column>
      <el-table-column
        prop="pageType"
        label="页面类型"
        width="150">

      </el-table-column>
      <el-table-column
        prop="pageWebPath"
        label="访问路径"
        width="250">

      </el-table-column>
      <el-table-column
        prop="pagePhysicalPath"
        label="物理路径"
        width="250">

      </el-table-column>
      <el-table-column
        prop="pageCreateTime"
        label="创建时间"
        width="180">

      </el-table-column>
      <el-table-column label="操作" width="80">
        <template slot-scope="page">
          <el-button size="small" type="test"
                     @click="edit(page.row.pageId)">编辑</el-button>

          <el-button size="small" type="test"
                     @click="del(page.row.pageId)">删除</el-button>
          <el-button size="small" type="test"
                     @click="preview(page.row.pageId)">页面预览</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      layout="prev ,pager, next"
      :total="total"
      :page-size="params.size"
      :current-page="params.page"
      @current-change="changePage"
      style="float: right">
    </el-pagination>
  </div>
</template>
<script>
  import cmsApi from "../api/cms"
  export default {
    data() {
      return {
        list: [],
        total:0,
        params:{
          page:1,
          size:10,
          siteId: null,
          pageAliase: null
        },
        siteList: []
      }
    },
    created() {
      this.params.page = Number.parseInt(this.$route.query.page || 1)
      this.params.siteId = this.$route.query.siteId || ''
    },
    methods: {
      preview:function (pageId) {
        //打开浏览器窗口
        window.open("http://localhost:8090/cms/preview/"+pageId);
      },
      query:function () {

        cmsApi.page_list(this.params.page,this.params.size,this.params).then((res)=>{
          if(res.success) {
            this.list = res.queryResult.list;
            this.total = res.queryResult.total
          } else {
            alert(res.message);
          }

        })
      },
      changePage:function (page) {
        this.params.page = page
        this.query()
      },
      querySite:function () {
        cmsApi.site_list().then((res) => {
          if(res.success) {
            this.siteList = res.queryResult.list;
          }
        })
      },
      edit:function (id) {
        this.$router.push({
          path:'/cms/page/edit/'+id,
          query:{
            page:this.params.page,
            siteId:this.params.siteId
          }
        })
      },
      del:function (id) {
          this.$confirm('您确认删除么?','提示',{}).then(() => {
              cmsApi.page_delete(id).then((res) => {
                  if(res.success) {
                      this.$message.success("删除成功")
                      this.query()
                  } else {
                      this.$message.error(res.message)
                  }
              })
          })
      }
    },
    mounted() {
      this.query();
      this.querySite();

    }
  }
</script>
<style>

</style>
